import React, { useState, useEffect } from 'react';
import './App.css';
// 引入 Ant Design 组件和相关依赖
import {Switch , Layout, Button, Card, Table, Space, Flex, Modal, Form, Input, DatePicker,message } from 'antd'
import dayjs from 'dayjs'; // 日期处理库
import { PlusOutlined } from '@ant-design/icons';
import { getTodoList, addTodo ,deleteTodo, updateTodo} from './api/todoApi'; // 导入 API 方法

const { Header, Content, Footer } = Layout;

function App() {
  // 消息提示 API
  const [messageApi, contextHolder] = message.useMessage();
  // 任务数据列表
  const [data, setData] = useState([])
  // 加载状态
  const [loading, setLoading] = useState(false);
  // 表单实例
  const [form] = Form.useForm();
  // 控制弹窗显示
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 编辑状态标记
  const [isEdit, setIsEdit] = useState(false);
  // 当前编辑的任务记录
  const [currentRecord, setCurrentRecord] = useState(null);

  // 获取任务列表（异步）
  const fetchData = async () => {
    setLoading(true);
    try {
      const result = await getTodoList(); // 获取任务数据
      setData(result);
    } catch (error) {
      console.error('获取数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 组件挂载时加载任务列表
  useEffect(() => {
    fetchData();
  }, [])

  // 显示添加任务弹窗
  const showModal = () => {
    setIsModalOpen(true);
    setIsEdit(false);
    setCurrentRecord(null);
  };

  // 关闭弹窗并重置表单
  const handleCancel = () => {
    setIsModalOpen(false);
    form.resetFields();
    setIsEdit(false);
    setCurrentRecord(null);
  };

  // 编辑任务时，填充表单并显示弹窗
  const handleEdit = (record) => {
    setCurrentRecord(record);
    setIsEdit(true);
    setIsModalOpen(true);
    // 设置表单字段值，日期字段需格式化
    const dueDate = record.dueDate ? dayjs(record.dueDate) : null;
    form.setFieldsValue({
      text: record.text,
      dueDate: dueDate,
    });
  };

  // 提交表单（添加或编辑任务）
  const onFinish = async () => {
    try {
      const values = await form.validateFields(); // 校验表单
      setLoading(true);
      // 构造任务数据，格式化日期
      const taskData = {
        text: values.text,
        dueDate: values.dueDate ? values.dueDate.toISOString().split('T')[0] : null, // 日期转字符串
        completed: false
      };
      // 判断是编辑还是新增
      if (isEdit && currentRecord) {
        await updateTodo(currentRecord.id, taskData);
      } else {
        await addTodo(taskData);
      }
      // 操作成功后刷新列表
      fetchData();
      setIsModalOpen(false);
      messageApi.open({
        type: 'success',
        content: isEdit ? '编辑成功' : '添加成功',
      });
      form.resetFields();
      setIsEdit(false);
      setCurrentRecord(null);
    } catch (error) {
      // 操作失败提示
      messageApi.open({
      type: 'error',
      content: isEdit ? '编辑失败' : '添加任务失败',
    });
    } finally {
      setLoading(false);
    }
  };

  // 删除任务，弹出确认框
  const handleDelete = async (id) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个任务吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        try {
          setLoading(true);
          await deleteTodo(id);
          fetchData();
          messageApi.open({
            type: 'success',
            content: '删除成功',
          });
        } catch (error) {
          messageApi.open({
            type: 'error',
            content: '删除失败',
          });
        } finally {
          setLoading(false);
        }
      },
    });
  };
  
  // 切换任务完成状态
  const handleStatusChange = async (record, completed) => {
    try {
      setLoading(true);
      // 更新任务状态
      await updateTodo(record.id, { ...record, completed });
      fetchData();
      messageApi.open({
        type: 'success',
        content: '状态更新成功',
      });
    } catch (error) {
      messageApi.open({
        type: 'error',
        content: '状态更新失败',
      });
    } finally {
      setLoading(false);
    }
  };

  // 表格列配置
  const columns = [
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      minWidth: 140,
      align: 'center',
    },
    {
      title: '任务描述',
      dataIndex: 'text',
      key: 'text',
      minWidth: 200,
      align: 'center',
    },
    {
      title: '计划完成时间',
      dataIndex: 'dueDate',
      key: 'dueDate',
      minWidth: 140,
      align: 'center',
      sorter: (a, b) => dayjs(a.dueDate).valueOf() - dayjs(b.dueDate).valueOf(), // 支持排序
      sortDirections: ['ascend', 'descend'],
    },
    {
      title: '状态',
      dataIndex: 'completed',
      key: 'completed',
      render: (text, record) => (
        // 状态切换开关
        <Switch
          checked={text}
          onChange={(checked) => handleStatusChange(record, checked)}
          checkedChildren="完成"
          unCheckedChildren="未完成"
        />
      ),
      minWidth: 100,
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      align: 'center',
      render: (text, record) => (
        <div>
          {/* 编辑按钮 */}
          <Button type="primary" size="small" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          {/* 删除按钮 */}
          <Button danger type="text" size="small" onClick={() => handleDelete(record.id)}>
            删除
          </Button>
        </div>
      ),
      minWidth: 160,
    },
  ];

  return (
    <div >
      <Layout className="App">
        {/* 全局消息提示容器 */}
        {contextHolder}
        {/* 顶部标题栏 */}
        <Header style={{ color: '#fff', background: '#4c5059', fontFamily: 'Maple Mono NF CN', fontSize: 24 }}>
          【react project】：todo list
        </Header>
        {/* 主体内容区域 */}
        <Content style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#f6f5f2' }}>
          {/* 卡片容器，包含表格和操作按钮 */}
          <Card style={{ width: '70%', height: 600,overflow: 'auto' }}>
            <Space direction="vertical" size="middle" style={{ display: 'flex', height: '100%', padding: '16px' }}>
              <Flex wrap gap="small">
                {/* 添加任务按钮 */}
                <Button type="primary" icon={<PlusOutlined />} onClick={showModal}>添加任务</Button>
              </Flex>
              {/* 任务表格 */}
              <Table
              pagination={{ pageSize: 5, showTotal: (total, range) => `共 ${total} 条数据` }}
              bordered={true} rowKey="id"
              columns={columns} dataSource={data} loading={loading} />
            </Space>
          </Card>
          {/* 添加/编辑任务弹窗 */}
          <Modal
            title={isEdit ? "编辑任务" : "添加任务"}
            closable={{ 'aria-label': 'Custom Close Button' }}
            cancelText="取消"
            okText={isEdit ? "更新" : "添加"}
            open={isModalOpen}
            onOk={onFinish}
            onCancel={handleCancel}
          >
            <Form
              form={form}
              layout="vertical"
              name="add_task_form"
            >
              <Form.Item
                name="text"
                label="任务描述"
                rules={[{ required: true, message: '请输入任务描述' }]}
              >
                <Input placeholder="请输入任务描述" />
              </Form.Item>
              <Form.Item
                name="dueDate"
                label="计划完成时间"
                rules={[
                  { required: true, message: '请选择计划完成时间' },
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                      if (value && value.isValid()) {
                        return Promise.resolve();
                      }
                      return Promise.reject(new Error('请选择有效的日期'));
                    },
                  })
                ]}
              >
                <DatePicker placeholder="选择日期" />
              </Form.Item>
            </Form>
          </Modal>
        </Content>
        {/* 页脚 */}
        <Footer style={{ color: '#fff', fontFamily: 'Maple Mono NF CN', fontSize: 24, backgroundColor: '#4c5059' }}>
          2025 @ todo list
        </Footer>
      </Layout>
    </div>
  );
}

export default App;